<!--
 * @Description: Web project
 * @Version: 2.0
 * @Autor: WenChing
 * @Email: 2510129345@qq.com
 * @Date: 2020-08-03 17:29:50
 * @LastEditors: WenChing
 * @LastEditTime: 2020-08-11 18:22:10
-->
<template>
  <div>
    <login-top middleTop="注册哔哩哔哩">
      <div slot="right" style="font-size:3.611vw" @click="$router.push('/login')">登录</div>
    </login-top>
    <LoginText
      label="姓名"
      style="margin:4.167vw 0"
      placeholder="请输入姓名"
      rule="^.{6,16}$"
      @inputChange="successIpt"
    ></LoginText>
    <LoginText
      label="账号"
      placeholder="请输入账号"
      rule="^.{6,16}$"
      @inputChange="successIpt"
    ></LoginText>
    <LoginText
      label="密码"
      type="password"
      placeholder="请输入密码"
      rule="^.{6,16}$"
      @inputChange="successIpt"
    ></LoginText>
    <LoginBtn btntext="注册" @registerSubmit="registerSubmit"></LoginBtn>
  </div>
</template>

<script>
import LoginTop from "@/components/common/LoginTop";
import LoginText from "@/components/LoginText";
import LoginBtn from '@/components/common/LoginBtn'
export default {
  data() {
    return {
        name:'',
        username:'',
        password:''
    };
  },
  components: {
    LoginTop,
    LoginText,
    LoginBtn
  },
  created() {},
  mounted() {},
  methods: {
      successIpt(res){
          console.log(res)
         this.name= res
         this.username = res
         this.password = res
        // 可以在组件中使用ES6箭头函数直接赋值
        //语法：  @inputChange="res => name =res"
      },

    //   async await 异步转为同步
      async registerSubmit(){
          let rulg = /^.{6,16}$/
        //   当数据不为空时
         if(rulg.test(this.name) && rulg.test(this.username) && rulg.test(this.password)){
          const res = await this.$http.post('/register',{
              name:this.name,
              username:this.username,
              password:this.password
          }).then(res=>{
              console.log(res);
            res.data.code == 302? this.$msg.fail(res.data.msg):this.$msg.success(res.data.msg)
          })
         }else{
             this.$msg.fail("格式不正确，请重新输出")
         }
      }
  }
};
</script>

<style scoped lang="less">
</style>
